<template>
    <div class="container fs-14">
        <breadcrumb base-title="设置" title="保险数据看板" :sub-title="subTitle"/>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
            <el-tab-pane label="长期保" name="longTerm">
                <longTerm />
            </el-tab-pane>
            <el-tab-pane label="日日保" name="day">
                <day ref="dayRef"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import longTerm from './longTerm/index.vue'
import day from './day/index.vue'

const router = useRouter()
const route = useRoute()
const activeName = ref('longTerm')

const dayRef = ref(null)
const handleClick = (tab, event) => {
    if (tab === 'day') {
        dayRef.value.calcTableHeight()
    }
    // activeName.value = tab
}

const subTitle = computed(() => {
    const map = {
        longTerm: '长期保',
        day: '日日保'
    }
    return map[activeName.value]
})

</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}
:deep(.el-tabs__nav-scroll) {
    // background-color: #fff;
}
:deep(.demo-tabs .el-tabs__nav-wrap) {
    padding: 0 20px;
    background-color: #fff;
}
</style>